<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业公告智能监控大屏 - 风险监控</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        /* 炒股软件风格配色 */
        :root {
            --bg-primary: #0D1421;
            --bg-secondary: #1A2332;
            --bg-card: rgba(26, 35, 50, 0.8);
            --text-primary: #E8F0FE;
            --text-secondary: #9CA3AF;
            --accent-red: #FF4757;
            --accent-green: #2ED573;
            --accent-orange: #FFA726;
            --accent-blue: #5DADE2;
            --border-color: rgba(255, 255, 255, 0.1);
            --glass-bg: rgba(26, 35, 50, 0.4);
            --glass-border: rgba(255, 255, 255, 0.1);
        }
        
        body {
            background: linear-gradient(135deg, var(--bg-primary) 0%, #1E2A3A 100%);
            color: var(--text-primary);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
        }
        
        .sidebar {
            background: var(--glass-bg);
            backdrop-filter: blur(15px);
            border-right: 1px solid var(--glass-border);
            transition: all 0.3s ease;
        }
        
        .nav-link {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        
        .nav-link:hover, .nav-link.active {
            background: rgba(93, 173, 226, 0.1);
            border-left-color: var(--accent-blue);
        }
        
        .chart-container {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-blue), #3498DB);
            border: none;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #3498DB, var(--accent-blue));
            transform: translateY(-2px);
        }
        
        .btn-toggle {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            transition: all 0.3s ease;
        }
        
        .btn-toggle.active {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }

        /* 指标解释提示框 */
        .tooltip {
            position: relative;
            cursor: help;
        }
        
        .tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s;
            z-index: 1000;
        }
        
        .tooltip:hover::after {
            opacity: 1;
            visibility: visible;
        }

        /* 风险预警动画效果 */
        .risk-alert {
            animation: riskPulse 2s infinite;
        }
        
        @keyframes riskPulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(255, 71, 87, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
        }
        
        .high-risk {
            border-left: 4px solid var(--accent-red);
            background: linear-gradient(90deg, rgba(255, 71, 87, 0.1) 0%, transparent 100%);
        }
        
        .severe-risk {
            border-left: 4px solid #DC3545;
            background: linear-gradient(90deg, rgba(220, 53, 69, 0.15) 0%, transparent 100%);
        }

        /* 弹窗样式 */
        .modal {
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
        }
        
        .modal-content {
            background: var(--bg-secondary);
            border: 1px solid var(--glass-border);
            max-height: 80vh;
            overflow-y: auto;
        }
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--bg-primary);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--accent-blue);
            border-radius: 4px;
        }
        
        /* 搜索栏样式 */
        .search-input {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
        }
        
        .search-input:focus {
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.1);
        }
        
        /* 关键词点击效果 */
        .keyword-item {
            transition: all 0.3s ease;
        }
        
        .keyword-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
        }
    </style>
</head>
<body>
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧导航栏 -->
        <div id="sidebar" class="sidebar w-64 flex-shrink-0 p-6">
            <div class="mb-8">
                <h1 class="text-xl font-bold text-white mb-2">企业公告监控</h1>
                <p class="text-sm text-gray-400">智能分析大屏系统</p>
            </div>
            
            <!-- 搜索筛选面板 -->
            <div class="mb-6 space-y-4">
                <h3 class="text-sm font-semibold text-gray-300 mb-3">搜索筛选</h3>
                
                <!-- 日期范围 -->
                <div>
                    <label class="block text-xs text-gray-400 mb-1">日期范围</label>
                    <div class="flex space-x-2">
                        <input type="date" id="startDate" class="search-input text-xs p-2 rounded flex-1">
                        <input type="date" id="endDate" class="search-input text-xs p-2 rounded flex-1">
                    </div>
                </div>
                
                <!-- 公司搜索 -->
                <div>
                    <label class="block text-xs text-gray-400 mb-1">公司名称</label>
                    <input type="text" id="companySearch" placeholder="输入公司名称或代码" class="search-input text-xs p-2 rounded w-full">
                </div>
                
                <!-- 关键词搜索 -->
                <div>
                    <label class="block text-xs text-gray-400 mb-1">公告关键词</label>
                    <input type="text" id="keywordSearch" placeholder="输入关键词" class="search-input text-xs p-2 rounded w-full">
                </div>
                
                <!-- 风险等级筛选 -->
                <div>
                    <label class="block text-xs text-gray-400 mb-1">风险等级</label>
                    <div class="space-y-1">
                        <label class="flex items-center">
                            <input type="checkbox" class="mr-2" id="severeRiskFilter"> 
                            <span class="text-xs text-red-500">严重利空</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" class="mr-2" id="destructiveRiskFilter"> 
                            <span class="text-xs text-red-600">毁灭性利空</span>
                        </label>
                    </div>
                </div>
                
                <button id="applyFilters" class="btn-primary text-white px-4 py-2 rounded w-full text-xs">
                    应用筛选
                </button>
                <button id="resetFilters" class="btn-toggle text-gray-300 px-4 py-2 rounded w-full text-xs">
                    重置筛选
                </button>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="space-y-2">
                <a href="/" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg">
                    <span class="mr-3">📊</span>
                    总览大屏
                </a>
                <a href="/source" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg">
                    <span class="mr-3">📈</span>
                    公告来源分析
                </a>
                <a href="/sentiment" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg">
                    <span class="mr-3">💭</span>
                    情感分析报告
                </a>
                <a href="/risk" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg active">
                    <span class="mr-3">⚠️</span>
                    风险监控预警
                </a>
                <a href="/system" class="nav-link flex items-center px-4 py-3 text-sm rounded-lg">
                    <span class="mr-3">⚙️</span>
                    系统运行状态
                </a>
            </nav>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="glass-card p-4 flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold text-white">风险监控预警</h2>
                    <p class="text-sm text-gray-400">企业公告风险识别与预警监控</p>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="refreshData" class="btn-primary px-4 py-2 rounded-lg text-sm">
                        🔄 刷新数据
                    </button>
                    <div class="text-sm text-gray-400">
                        更新时间: <span id="updateTime">--</span>
                    </div>
                </div>
            </header>

            <!-- 内容滚动区 -->
            <main class="flex-1 overflow-y-auto p-6 space-y-6">
                <!-- 风险概览指标 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="chart-container rounded-lg p-6 tooltip risk-alert" data-tooltip="严重利空和毁灭性利空公告总数">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-400">高风险公告</p>
                                <p class="text-3xl font-bold text-red-400" id="highRiskCount">0</p>
                            </div>
                            <div class="text-4xl">🚨</div>
                        </div>
                    </div>
                    
                    <div class="chart-container rounded-lg p-6 tooltip" data-tooltip="涉及高风险公告的公司数量">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-400">风险公司数</p>
                                <p class="text-3xl font-bold text-orange-400" id="highRiskCompanies">0</p>
                            </div>
                            <div class="text-4xl">🏢</div>
                        </div>
                    </div>
                    
                    <div class="chart-container rounded-lg p-6 tooltip" data-tooltip="今日新增的高风险公告数量">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-400">今日新增</p>
                                <p class="text-3xl font-bold text-yellow-400" id="todayHighRisk">0</p>
                            </div>
                            <div class="text-4xl">📅</div>
                        </div>
                    </div>
                </div>

                <!-- 风险趋势和公司列表 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 风险趋势图 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">风险趋势分析</h3>
                        <div id="riskTrendChart" style="height: 350px;"></div>
                    </div>
                    
                    <!-- 高风险公司列表 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">高风险公司列表</h3>
                        <div id="riskCompaniesList" class="space-y-3 max-h-80 overflow-y-auto">
                            <!-- 动态加载 -->
                        </div>
                    </div>
                </div>

                <!-- 风险关键词分析 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 热门风险关键词 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">热门风险关键词</h3>
                        <div id="riskKeywords" class="space-y-2 max-h-80 overflow-y-auto">
                            <!-- 动态加载 -->
                        </div>
                    </div>
                    
                    <!-- 风险分布分析 -->
                    <div class="chart-container rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-white mb-4">风险等级分布</h3>
                        <div id="riskDistributionChart" style="height: 350px;"></div>
                    </div>
                </div>

                <!-- 实时风险预警 -->
                <div class="chart-container rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-white mb-4">🚨 实时风险预警</h3>
                    <div id="riskAlerts" class="space-y-4 max-h-96 overflow-y-auto">
                        <!-- 动态加载 -->
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 风险详情弹窗 -->
    <div id="riskDetailModal" class="modal fixed inset-0 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="modal-content rounded-lg p-6 w-full max-w-4xl">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-white" id="modalTitle">风险详情</h3>
                    <button id="closeModal" class="text-gray-400 hover:text-white text-2xl">&times;</button>
                </div>
                <div id="modalContent" class="space-y-4 max-h-96 overflow-y-auto">
                    <!-- 动态加载详情内容 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        let charts = {};
        let currentFilters = {};
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
            loadData();
            
            // 设置定时刷新
            setInterval(loadData, 60000); // 每分钟刷新一次
            
            // 绑定事件
            bindEvents();
        });
        
        function initCharts() {
            charts.riskTrend = echarts.init(document.getElementById('riskTrendChart'));
            charts.riskDistribution = echarts.init(document.getElementById('riskDistributionChart'));
        }
        
        function bindEvents() {
            // 刷新数据按钮
            document.getElementById('refreshData').addEventListener('click', loadData);
            
            // 筛选功能
            document.getElementById('applyFilters').addEventListener('click', applyFilters);
            document.getElementById('resetFilters').addEventListener('click', resetFilters);
            
            // 弹窗关闭
            document.getElementById('closeModal').addEventListener('click', closeModal);
            document.getElementById('riskDetailModal').addEventListener('click', function(e) {
                if (e.target === this) closeModal();
            });
        }
        
        async function loadData() {
            try {
                // 加载风险统计数据
                const statsData = await fetch('/api/risk/high-risk-stats').then(r => r.json());
                updateRiskStats(statsData);
                
                // 加载风险趋势数据
                const trendData = await fetch('/api/risk/trend?days=30').then(r => r.json());
                updateRiskTrendChart(trendData);
                
                // 加载其他数据
                await Promise.all([
                    loadRiskCompanies(),
                    loadRiskKeywords(),
                    loadRiskAlerts()
                ]);
                
                // 更新时间
                document.getElementById('updateTime').textContent = new Date().toLocaleString();
                
            } catch (error) {
                console.error('加载数据失败:', error);
            }
        }
        
        function updateRiskStats(data) {
            document.getElementById('highRiskCount').textContent = data.high_risk_count;
            document.getElementById('highRiskCompanies').textContent = data.high_risk_companies;
            document.getElementById('todayHighRisk').textContent = data.today_high_risk;
            
            // 如果有新的风险预警，添加动画效果
            if (data.today_high_risk > 0) {
                document.querySelector('.risk-alert').classList.add('risk-alert');
            }
        }
        
        function updateRiskTrendChart(data) {
            const chart = charts.riskTrend;
            
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: '#FF4757',
                    textStyle: { color: '#fff' }
                },
                legend: {
                    data: ['严重利空', '毁灭性利空'],
                    textStyle: { color: '#E8F0FE' },
                    top: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.date),
                    axisLine: { lineStyle: { color: '#FF4757' } },
                    axisLabel: { color: '#E8F0FE' }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#FF4757' } },
                    axisLabel: { color: '#E8F0FE' },
                    splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
                },
                series: [
                    {
                        name: '严重利空',
                        type: 'line',
                        data: data.map(item => item.severe),
                        itemStyle: { color: '#FF6B7A' },
                        areaStyle: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(255, 107, 122, 0.3)' },
                                { offset: 1, color: 'rgba(255, 107, 122, 0.05)' }
                            ])
                        },
                        smooth: true
                    },
                    {
                        name: '毁灭性利空',
                        type: 'line',
                        data: data.map(item => item.destructive),
                        itemStyle: { color: '#DC3545' },
                        areaStyle: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(220, 53, 69, 0.3)' },
                                { offset: 1, color: 'rgba(220, 53, 69, 0.05)' }
                            ])
                        },
                        smooth: true
                    }
                ]
            };
            
            chart.setOption(option);
        }
        
        async function loadRiskCompanies() {
            try {
                const data = await fetch('/api/risk/companies?limit=20').then(r => r.json());
                const container = document.getElementById('riskCompaniesList');
                
                container.innerHTML = data.map(item => `
                    <div class="p-3 rounded ${item.negative_level === '毁灭性利空' ? 'severe-risk' : 'high-risk'} cursor-pointer company-item"
                         data-company="${item.secName}" data-code="${item.secCode}" data-details='${JSON.stringify(item)}'>
                        <div class="flex justify-between items-start mb-2">
                            <div class="flex-1">
                                <h4 class="font-medium text-white text-sm">${item.secName} (${item.secCode})</h4>
                                <p class="text-xs text-gray-400 mt-1">${item.title}</p>
                                <p class="text-xs text-red-400 mt-1">${item.negative_reason}</p>
                            </div>
                            <span class="text-xs px-2 py-1 rounded ${item.negative_level === '毁灭性利空' ? 'bg-red-600' : 'bg-red-500'} text-white">
                                ${item.negative_level}
                            </span>
                        </div>
                        <p class="text-xs text-gray-500">${formatDate(item.publishTime)}</p>
                    </div>
                `).join('');
                
                // 绑定公司点击事件
                document.querySelectorAll('.company-item').forEach(item => {
                    item.addEventListener('click', function() {
                        const details = JSON.parse(this.dataset.details);
                        showRiskDetailModal(`${details.secName} (${details.secCode}) - 风险详情`, [details], 'company');
                    });
                });
                
            } catch (error) {
                console.error('加载风险公司失败:', error);
            }
        }
        
        async function loadRiskKeywords() {
            try {
                const data = await fetch('/api/overview/keywords?keyword_type=negative').then(r => r.json());
                const container = document.getElementById('riskKeywords');
                
                container.innerHTML = data.map(item => `
                    <div class="keyword-item flex justify-between items-center p-3 rounded bg-red-900 bg-opacity-30 hover:bg-opacity-50 cursor-pointer border border-red-500 border-opacity-30" 
                         data-keyword="${item.keyword}" data-details='${JSON.stringify(item.details)}'>
                        <span class="text-sm text-white">${item.keyword}</span>
                        <span class="text-xs px-3 py-1 rounded bg-red-500 text-white font-medium">
                            ${item.count}条
                        </span>
                    </div>
                `).join('');
                
                // 绑定关键词点击事件
                document.querySelectorAll('.keyword-item').forEach(item => {
                    item.addEventListener('click', function() {
                        const keyword = this.dataset.keyword;
                        const details = JSON.parse(this.dataset.details);
                        showRiskDetailModal(`风险关键词: ${keyword}`, details, 'keyword');
                    });
                });
                
                // 更新风险分布图
                updateRiskDistributionChart(data);
                
            } catch (error) {
                console.error('加载风险关键词失败:', error);
            }
        }
        
        function updateRiskDistributionChart(keywordData) {
            const chart = charts.riskDistribution;
            
            // 统计不同关键词的频次
            const topKeywords = keywordData.slice(0, 10);
            
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: '#FF4757',
                    textStyle: { color: '#fff' },
                    formatter: '{b}: {c}条 ({d}%)'
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '50%'],
                    data: topKeywords.map(item => ({
                        value: item.count,
                        name: item.keyword,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#FF4757' },
                                { offset: 1, color: '#DC3545' }
                            ])
                        }
                    })),
                    label: {
                        show: true,
                        color: '#E8F0FE',
                        formatter: '{b}\n{c}条'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(255, 71, 87, 0.5)'
                        }
                    }
                }]
            };
            
            chart.setOption(option);
        }
        
        async function loadRiskAlerts() {
            try {
                const data = await fetch('/api/overview/risk-alerts?limit=15').then(r => r.json());
                const container = document.getElementById('riskAlerts');
                
                container.innerHTML = data.map((item, index) => `
                    <div class="p-4 rounded-lg border-l-4 ${item.negative_level === '毁灭性利空' ? 'border-red-600 bg-red-900' : 'border-red-500 bg-red-800'} bg-opacity-20 cursor-pointer alert-item"
                         data-details='${JSON.stringify(item)}' style="animation-delay: ${index * 0.1}s">
                        <div class="flex justify-between items-start mb-3">
                            <div class="flex-1">
                                <div class="flex items-center space-x-2 mb-2">
                                    <span class="text-lg">🚨</span>
                                    <h4 class="font-medium text-white">${item.title}</h4>
                                </div>
                                <p class="text-sm text-gray-300 mb-2">${item.secCode} - ${item.secName}</p>
                                <p class="text-sm text-red-300">${item.negative_reason}</p>
                            </div>
                            <div class="text-right">
                                <span class="text-xs px-3 py-1 rounded ${item.negative_level === '毁灭性利空' ? 'bg-red-600' : 'bg-red-500'} text-white font-medium mb-2 block">
                                    ${item.negative_level}
                                </span>
                                <span class="text-xs text-gray-400">${formatDate(item.publishTime)}</span>
                            </div>
                        </div>
                        ${item.negative_keywords && item.negative_keywords.length > 0 ? `
                            <div class="flex flex-wrap gap-2">
                                ${item.negative_keywords.map(keyword => `
                                    <span class="text-xs px-2 py-1 rounded bg-red-600 bg-opacity-50 text-red-200">
                                        ${keyword}
                                    </span>
                                `).join('')}
                            </div>
                        ` : ''}
                    </div>
                `).join('');
                
                // 绑定预警点击事件
                document.querySelectorAll('.alert-item').forEach(item => {
                    item.addEventListener('click', function() {
                        const details = JSON.parse(this.dataset.details);
                        showRiskDetailModal(`风险预警: ${details.secName}`, [details], 'alert');
                    });
                });
                
            } catch (error) {
                console.error('加载风险预警失败:', error);
            }
        }
        
        function showRiskDetailModal(title, details, type) {
            const modal = document.getElementById('riskDetailModal');
            const modalTitle = document.getElementById('modalTitle');
            const content = document.getElementById('modalContent');
            
            modalTitle.textContent = title;
            
            content.innerHTML = details.map(detail => `
                <div class="bg-gray-800 bg-opacity-50 rounded p-4 border-l-4 border-red-500">
                    <div class="flex justify-between items-start mb-3">
                        <h4 class="font-medium text-white text-lg">${detail.title}</h4>
                        <span class="text-xs text-gray-400">${formatDate(detail.publishTime)}</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                        <div>
                            <p class="text-sm text-gray-300">公司信息</p>
                            <p class="text-white font-medium">${detail.secCode} - ${detail.secName}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-300">风险等级</p>
                            <p class="text-red-400 font-medium">${detail.negative_level}</p>
                        </div>
                    </div>
                    <div class="mb-3">
                        <p class="text-sm text-gray-300 mb-1">风险原因</p>
                        <p class="text-gray-200">${detail.negative_reason}</p>
                    </div>
                    ${detail.negative_keywords && detail.negative_keywords.length > 0 ? `
                        <div>
                            <p class="text-sm text-gray-300 mb-2">风险关键词</p>
                            <div class="flex flex-wrap gap-2">
                                ${detail.negative_keywords.map(keyword => `
                                    <span class="text-xs px-2 py-1 rounded bg-red-600 text-white">
                                        ${keyword}
                                    </span>
                                `).join('')}
                            </div>
                        </div>
                    ` : ''}
                </div>
            `).join('');
            
            modal.classList.remove('hidden');
        }
        
        function closeModal() {
            document.getElementById('riskDetailModal').classList.add('hidden');
        }
        
        function applyFilters() {
            currentFilters = {
                startDate: document.getElementById('startDate').value,
                endDate: document.getElementById('endDate').value,
                company: document.getElementById('companySearch').value,
                keyword: document.getElementById('keywordSearch').value,
                severeRisk: document.getElementById('severeRiskFilter').checked,
                destructiveRisk: document.getElementById('destructiveRiskFilter').checked
            };
            
            loadData();
        }
        
        function resetFilters() {
            document.getElementById('startDate').value = '';
            document.getElementById('endDate').value = '';
            document.getElementById('companySearch').value = '';
            document.getElementById('keywordSearch').value = '';
            document.getElementById('severeRiskFilter').checked = false;
            document.getElementById('destructiveRiskFilter').checked = false;
            
            currentFilters = {};
            loadData();
        }
        
        function formatDate(dateStr) {
            return new Date(dateStr).toLocaleString('zh-CN');
        }
        
        // 响应式处理
        window.addEventListener('resize', function() {
            Object.values(charts).forEach(chart => {
                if (chart) chart.resize();
            });
        });
    </script>
</body>
</html> 